<template>
	<view class="detail">
		<view class="title">
			{{detail.title}}
		</view>
		<view class="info">
			<view class="author">编辑 :{{detail.author}}</view>
			<view class="time">发布日期 :{{detail.posttime}}</view>
		</view>
		<view class="content">
			<rich-text :nodes="detail.content"></rich-text>
			<!-- {{detail.content}} -->
		</view>
		<view class="description">
			声明：本站的内容均采集与腾讯新闻，如果侵权请联系管理(51384357@qq.com)进行整顿删改，本站进行了内容采集不代表本站及作者观点，若有侵犯，请及时联系管理员，谢谢您的支持
		</view>
	</view>
</template>

<script>
	// 引入时间戳转换的函数
	import {formatDate} from "@/utils/tool.js";
	// console.log(formatDate(1583224108952))
	export default {
		data() {
			return {
				options:null,
				detail:{}
			};
		},
		onLoad(e){
			this.options=e;
			this.getdetail();
		},
		methods:{
			getdetail(){
				uni.request({
					url:"http://ku.qingnian8.com/dataApi/news/detail.php",
					data:this.options,
					success: (res) => {
						console.log(res)
						// 将时间戳转为日期
						res.data.posttime=formatDate(Number(res.data.posttime))
						// 让图像在小程序中正常显示
						res.data.content=res.data.content.replace(/<img/gi,'<img style="max-width:100%"');
						this.detail=res.data
						
						this.savehistory()
						
						// 设置新闻详情页的导航标题	
						uni.setNavigationBarTitle({
							title:this.detail.title
						})
					}
				})
			},
			// 存储缓存
			savehistory(){
				// 先在缓存中读取，看缓存中有咩有数据
				let historyarr=uni.getStorageSync("historyarr") || [];
				let item={
					id:this.detail.id,
					classid:this.detail.classid,
					picurl:this.detail.picurl,
					title:this.detail.title,
					looktime:formatDate(Date.now())
				}
				let index=historyarr.findIndex(i=>{
					return i.id==this.detail.id
				})
				// console.log(index)
				if(index>=0){
					historyarr.splice(index,1)
				}
				historyarr.unshift(item)
				// 数据存在缓存中
				uni.setStorageSync("historyarr",historyarr)
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		padding: 30rpx;
		.title{
			font-size: 46rpx;
			color: #333;
		}
		.info{
			background: #f6f6f6;
			padding: 20rpx 10rpx;
			font-size: 26rpx;
			color: #666;
			display: flex;
			justify-content: space-between;
			margin: 30rpx 0;
		}
		.content{
			padding-bottom: 50rpx;
			/deep/ img{
				max-width: 100%;
			}
		}
		.description{
			background: #fef0f0;
			font-size: 26rpx;
			padding: 20rpx;
			color: #f89898;
			line-height: 1.8em;
		}
	}
</style>
